<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
    <style>
        .ol-zoomslider {
            top: 7.5em
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
</body>
<script>
    const gaode = new ol.layer.Tile({
        title: "高德地图",
        source: new ol.source.XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            wrapX: false
        })
    });
    // 初始化地图
    const map = new ol.Map({
        // 将初始化的地图设置到id为map的元素上
        target: "map",
        // 设置图层
        layers: [
            gaode
        ],
        view: new ol.View({
            center: [114.30, 30.50],//中心点 经度、纬度
            zoom: 12,//地图放大级别
            projection: 'EPSG:4326'
        })
    })
    /* 视图跳转控件 */
    const ZoomToExtent = new ol.control.ZoomToExtent({
        extent: [110, 30, 160, 30],
    })
    map.addControl(ZoomToExtent)
    /* 放大缩小控件 */
    const zoomslider = new ol.control.ZoomSlider();
    map.addControl(zoomslider)
    //全屏控件
    const fullScreen = new ol.control.FullScreen();
    map.addControl(fullScreen)
</script>

</html>